<template>
    <div class="m-citylist">
        <div class="chat-sort">
            <div class="title">按拼音首字母选择：</div>
            <div class="letter">
                <a href="javascript:;" v-for="(item,index) in letter" :key="index">{{item}}</a>
            </div>
        </div>
        <div class="chat-city">
            <dl>
                <dt>A</dt>
                <dd>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                </dd>
            </dl>
            <dl>
                <dt>A</dt>
                <dd>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                </dd>
            </dl>
            <dl>
                <dt>A</dt>
                <dd>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                </dd>
            </dl>
            <dl>
                <dt>A</dt>
                <dd>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                    <a href="javascript:;">北京</a>  
                    <a href="javascript:;">天津</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                </dd>
            </dl>
        </div>    
    </div>
</template>

<script>
export default{
    data(){
        return{
            letter: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
        }
    }
}
</script>